<template>
	<uni-popup ref="popup" type="center">
		<view class="popup-layout">
			<view class="title-row">
				<view>台球桌号</view>
				<image class="close-img" :src="asserts.ic_close" @click="close"></image>
			</view>
			<input placeholder="请输入台球桌号" class="input-view" v-model="roomNumber"/>
			<view class="close" @click="confirmClick">确定</view>
			<view style="height: 48rpx;"></view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				roomNumber: '',
			}
		},
		///deep/生效
		options: { 
			styleIsolation: 'shared' ,
		},
		methods: {
			//显示弹窗
			show() {
				this.$refs.popup.open()
			},
			
			//关闭
			close(){
				this.$refs.popup.close()
			},
			//确定
			confirmClick(){
				if(!this.roomNumber){
					uni.showToast({
						title: "请输入台球桌号"
					})
					return
				}
				this.close()
				this.$emit('inputBack', {data: this.roomNumber})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ .uni-popup__wrapper {
	    width: 100% !important;
	}
	.popup-layout{
		width: calc(100% - 112rpx);
		background: #FFFFFF;
		border-radius: 32rpx;
		margin: 0 56rpx;
		padding: 0 48rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.title-row{
		position: relative;
		width: calc(100% + 96rpx);
		height: 112rpx;
		line-height: 112rpx;
		background: linear-gradient( 180deg, #D8F8FA 0%, #FFFFFF 100%);
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		font-size: 32rpx;
		color: #01CBFF;
		text-align: center;
		margin: 0 -48rpx 16rpx -48rpx;
		.close-img{
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 36rpx;
			right: 52rpx;
		}
	}
	.input-view{
		width: 100%;
		margin: 48rpx 48rpx 32rpx 48rpx;
		border-radius: 8rpx;
		background-color: #F9F9F9;
		height: 100rpx;
		font-size: 32rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	.qr-code-img{
		width: 480rpx;
		height: 480rpx;
		background-color: #585F70;
		margin-top: 32rpx;
	}
	.sub-title{
		font-size: 28rpx;
		color: #021624;
		line-height: 40rpx;
		margin-top: 32rpx;
	}
	.content{
		font-size: 24rpx;
		color: #585F70;
		line-height: 34rpx;
		margin-top: 8rpx;
	}
	.close{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #01CBFF;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-top: 32rpx;
	}
</style>
